<template>
    <div class="template-form-Lu">
        <a-modal
            title="新增库存"
            :visible="applicationTableVisible"
            :maskClosable="false"
            :closable="true"
            :destroyOnClose="true"
            width="70%"
            :dialog-style="{ margin: '0 auto' }"
            wrapClassName="form-modal-Lu"
            @cancel="closeVisible">
            <template slot="footer">
                <a-button @click="closeVisible">关闭</a-button>
                <a-button class="blue-btn" @click="onSubmit">
                保存
                </a-button>
                <a-button class="blue-btn" @click="resetForm">
                重置
                </a-button>
            </template>
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                class="form-model-bgyp"
            >
                <a-form-model-item ref="name" label="物品名称" prop="name">
                <a-input v-model="form.name" class="form-model-item"/>
                </a-form-model-item>
                <a-form-model-item ref="fwplb" label="物品类别" prop="fwplb" >
                <a-input v-model="form.fwplb" class="form-model-item"/>
                </a-form-model-item>
                <a-form-model-item ref="fwpbh" label="物品编号" prop="fwpbh" >
                <a-input v-model="form.fwpbh" class="form-model-item"/>
                </a-form-model-item>
                <a-form-model-item ref="fdw" label="单位" prop="fdw" >
                <a-input v-model="form.fdw" class="form-model-item"/>
                </a-form-model-item>
                <a-form-model-item label="物品数量" prop="fwpsl">
                <a-input-number v-model="form.fwpsl" :min="1" class="form-model-item"/>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>
<script>
import {add} from './service/index'
import store from '@/store'
export default {
  data() {
    return {
      applicationTableVisible: false,

      labelCol: { span: 8 },
      wrapperCol: { span: 10 },
      other: '',
      form: {
        name: '',
        fwplb: '',
        fwpbh: '',
        fdw: '',
        fwpsl: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入物品名称', trigger: 'blur' },
          // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        fwplb: [{ required: true, message: '请输入物品类别', trigger: 'blur' }],
        fwpbh: [{ required: true, message: '请输入物品编号', trigger: 'blur' }],
        fdw: [
          { required: true, message: '请输入物品单位', trigger: 'blur' },
        ],
        fwpsl: [{ required: true, message: '请输入物品数量', trigger: 'blur' }],
      },
    }
  },
  methods: {
    closeVisible(){
      this.$emit('success')
      this.applicationTableVisible = false
      this.resetForm()
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        //console.log(valid)
        if(valid) {
          let data = {
            fwpmc: this.form.name,
            fwpbh: this.form.fwpbh,
            fwplb: this.form.fwplb,
            fwpsl: this.form.fwpsl,
            fdw: this.form.fdw,
            fuserid: store.getters.userInfo.id
          }
          add(data).then(res => {
            if(res.code == 200){
              this.$message.success(res.message)
              this.closeVisible()
            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          //console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
}
</script>
<style>
.form-model-item {
  width: 100%;
  height: 60px;
}
</style>
<style>
@import url('../../css/oaLess.css');
/* @import url('../../css/oaClass.css'); */
</style>
